<template>
	<div class="login">
		<h4>课程管理系统</h4>
		<el-form :model="loginData" label-width="120px" class="form">
			<el-form-item label="名称">
				<el-input v-model="loginData.name" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="密码" label-width="120px">
				<el-input v-model="loginData.password" placeholder="请输入密码" show-password />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="submit" @click="submitFun">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { login } from '@/http/api'
import router from '@/router/index'
export default {
	name: 'Login',
	setup() {
		let loginData = reactive({
			name: '',
			password: ''
		})
		let submitFun = () => {
			// loginData.name == ''
			// 判断账号密码是否填写
			if (!loginData.name || !loginData.password) {
				ElMessage.error('请先填写姓名和密码')
				return
			}
			// 执行登陆操作 发送请求 验证
			login(loginData).then(res => {
				// console.log(res)
				// 跳转路由
				router.push('/home')
			}).catch(err => {
				console.log(err.message)
			})
		}
		return {
			loginData,
			submitFun
		}
	}
}
</script>

<style scoped>
.login {
	width: 500px;
	margin: 100px auto;
	border: 1px solid #efefef;
	border-radius: 10px;
	padding: 20px;
}

h4 {
	text-align: center;
}

.submit {
	width: 100%;
}
</style>